<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片列表</title>
<link rel="stylesheet" href="<%=basePath %>layui/css/layui.css">
<script src="<%=basePath %>layui/layui.js"></script>
<script src="<%=basePath %>/backPage/js/jquery.min.js"></script>
</head>
<body>
<br/>
<!-- 条件查询 -->
<form class="layui-form" action="" onsubmit="return false;">
  <div class="layui-form-item"  style="margin-left: 250px;">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <select name="f_pid" lay-search="" id="serch_f_pid"  autocomplete="off">
        <option value=""></option>
      </select>
    </div>
    <label class="layui-form-label">是否主图</label>
    <div class="layui-input-inline">
      <select name="isMain"  autocomplete="off">
        <option value=""></option>
        <option value="1">是</option>
        <option value="0">否</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <button class="layui-btn" lay-submit lay-filter="serchBtn"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </div>
</form>
<hr>

<table id="demo" lay-filter="test"></table>

<!-- 添加的表单 -->
<form id="A_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <select name="f_pid" lay-search="" id="A_f_pid" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商品图片</label>
    <div class="layui-input-inline">
      <input type="text" id="A_img" name="img" lay-verify="required"   placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn" id="A_imgUpload">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权重</label>
    <div class="layui-input-inline">
      <input type="text" name="weight" lay-verify="required|weight" placeholder="请输入权重" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
         	该项将影响你的展示顺序
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="addBtn">添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<!-- 修改的表单 -->
<form id="U_form" lay-filter="U_form" class="layui-form" action="" onsubmit="return false;" style="display:none">
<br>
	<input type="hidden" name="id" />
  <div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-inline">
      <select name="f_pid" lay-search="" id="U_f_pid" lay-verify="required" autocomplete="off">
        <option value=""></option>
      </select>
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">商品图片</label>
    <div class="layui-input-inline">
      <input type="text" id="U_img" name="img" lay-verify="required"   placeholder="请输入图片路径" autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn" id="U_imgUpload">
  		<i class="layui-icon">&#xe67c;</i>上传图片
	</button>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">是否主图</label>
    <div class="layui-input-inline">
      <input type="checkbox" name="isMain" lay-skin="switch" lay-text="是的|不是" >
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">权重</label>
    <div class="layui-input-inline">
      <input type="text" name="weight" lay-verify="required|weight"  placeholder="请输入权重" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
         	该项将影响你的展示顺序
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="updateBtn">修改</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>


<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delAll"><i class="layui-icon">&#xe640;</i>批量刪除</button>
  </div>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
</script>

<script type="text/html" id="imgTPL">
  <img src="<%=basePath%>{{d.img}}" onclick="hoverOpenImg()" style="width:60px;height:30px" />
</script>

<script>
function hoverOpenImg(){
    var img_show = null;
    $('td div img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:200px;' />";
        img_show = layer.tips(img, this,{
            tips:[2, 'rgba(255,255,255,1)']
            ,area: ['220px']
        });
    },function(){
        layer.close(img_show);
    });
}
</script>

<script type="text/html" id="switchMain">
    <input type="checkbox" productid="{{d.f_pid}}" productmainimgurl="{{d.img}}" data-id="{{d.id}}" name="isMain" lay-filter="isMainSwitch" lay-skin="switch" lay-text="主图|副图" {{d.isMain=="1" ? "checked":""}}>
</script>

<script type="text/javascript">

layui.use(['table','layer','form','upload','laydate'], function(){
	  var table = layui.table;
	  var layer = layui.layer;
	  var form = layui.form;
	  var $ = layui.$;
	  var upload = layui.upload;
	  var laydate = layui.laydate;
	  var currNow = 1; //声明一个全局变量存储当前页码
	  
	  laydate.render({
		    elem: '#A_date'
		});
	  laydate.render({
		    elem: '#U_date'
		});
	  
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    ,height: 565
	    ,url: '<%=basePath %>back/queryAllImages' //数据接口
	    ,page: true //开启分页
	    ,id:"showAll"
	    ,limits:[10,50,100]
	    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
	    ,done: function(res, curr, count){
	        console.log(res.data);  //代表我们当前页的数据
	        //console.log(res.data.length==null);
	        //alert(res.data.length);
	        if(res.data==null){
	        	//alert(currNow);
	        	currNow = curr-1;  //如果当前页面没有数据了，就让页码-1
	        	
	        	//我们需要手动再重新刷新数据表格
	        	table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    	}); //只重载数据
	        }else{
	        	//alert(currNow);
	        	currNow = curr;
	        }
	        
	      }
	    ,cols: [[ //表头
	    	{type: 'checkbox',width:58,}
	      ,{field: 'id', title: 'ID', width:100, sort: true}
	      ,{field: 'productName', title: '商品名称', width:200,sort: true}
	      ,{field: 'img', title: '商品图片', width: 200,sort: true,templet: '#imgTPL'}
	      ,{field: 'isMain', title: '主图副图', width: 200,sort: true,toolbar:'#switchMain'}
	      ,{field: 'weight', title: '权重', width: 200, sort: true}
	      ,{field: 'creatTime', title: '创建时间', width: 200, sort: true}
	      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	  });
	  
	  
	//自定义添加的验证规则，自带有phone，decimal
      form.verify({
          decimal:[/^[0-9]+([.]{1}[0-9]+){0,1}$/, '只能为小数或整数'],//验证价格
          number:[/^\d{0,8}$/,'只能为整数长度不过8位'],//验证数值
          weight: [/^([1-9][0-9]{0,1}|100)$/, '必须为100以内']//验证权重
      });
	  
	  
	  
	//监听提交[搜索]
	  form.on('submit(serchBtn)', function(data){
	    //console.log(data.field);  //可以得到相关的参数值
	    //我们需要带着这些参数，重载一下表格就ok
	    table.reload('showAll', {
		  where: { //设定异步数据接口的额外参数，任意设
			 f_pid: data.field.f_pid
		    ,isMain: data.field.isMain
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		}); //只重载数据
	  });
	  
	  //查询出商品加入下拉框
	  $.post("<%=basePath%>back/queryAllProductWitchImagesSelect",{
	  },function(res){
		  for(var i=0; i<res.length; i++){
			  $("#serch_f_pid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#A_f_pid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  $("#U_f_pid").append("<option value='"+res[i].id+"'>"+res[i].name+"</option>");
			  form.render('select');  //让表单当中的select重新渲染
		  }
		  
	  },'json');
	  
	  
	  // 处理开关点击时把信息传入到后台进行修改
      form.on('switch(isMainSwitch)', function (data) {
          var id = $(this).attr('data-id');//获得当前点击对象的id值
          var valid = this.checked ? 'on' : 'off';//获取到点击后的开关状态（on/off）
          var x=data.elem.checked;//获取到点击后的开关状态（true/false）
          var productId = $(this).attr('productid');
		  var productMainImgUrl = $(this).attr('productmainimgurl');
          layer.open({
              content: '确定要修改主副图状态吗？'//给用户的友好提示
              ,btn: ['确定', '取消']
              ,yes: function(index, layero){
                  data.elem.checked=x;
                  layer.close(index);
                  if(x){//true则为开关点击后为开启状态，来执行
                	  $.ajax({
                          type : "POST",
                          url : "<%=basePath %>back/queryAllImagesIsMainOnStatusByF_pid/"+productId,
                          data : {},
                          success : function(res) {
                              if(res){//true表示表里没有内容，可以添加一个主图
                            	  $.ajax({
                                      type : "POST",
                                      url : "<%=basePath %>back/editImagesIsMainById/"+id+"/"+valid,
                                      data : {"productId":productId,"productMainImgUrl":productMainImgUrl},
                                      success : function(res) {
                                          if(res){
                                              layer.msg("修改成功！");
                                              layer.closeAll('page');
                                          }else{
                                              layer.msg("修改失败！");
                                              layer.closeAll('page');
                                          }
                                          form.render();
                                      },
                                      error : function() {
                                      }
                                  });
                              }else{
                                  layer.msg("主图只能有一个，不能够再添加了！");
                                  data.elem.checked=!x;
                                  layer.closeAll('page');
                              }
                              form.render();
                          },
                          error : function() {
                          }
                      });
                  }else{//false则为开关点击后为关闭状态，来执行
                	  $.ajax({
                          type : "POST",
                          url : "<%=basePath %>back/queryAllImagesIsMainOnStatusByF_pid/"+productId,
                          data : {},
                          success : function(res) {
                              if(res){//返回true表示没有主图  不会进
                            	  $.ajax({
                                      type : "POST",
                                      url : "<%=basePath %>back/editImagesIsMainById/"+id+"/"+valid,
                                      data : {"productId":productId,"productMainImgUrl":productMainImgUrl},
                                      success : function(res) {
                                          if(res){
                                              layer.msg("修改成功！");
                                              layer.closeAll('page');
                                          }else{
                                              layer.msg("修改失败！");
                                              layer.closeAll('page');
                                          }
                                          form.render();
                                      },
                                      error : function() {
                                      }
                                  });
                              }else{//返回的false表示查询出有主图
                            	  layer.msg("这是最后一个主图，不能够修改了！");
                                  data.elem.checked=!x;
                                  layer.closeAll('page');
                              }
                              form.render();
                          },
                          error : function() {
                          }
                      });
                  }
					                  
              }
              ,btn2: function(index, layero){
                  //按钮【按钮二】的回调
                  data.elem.checked=!x;
                  form.render();
                  layer.close(index);
                  //return false 开启该代码可禁止点击该按钮关闭
              }
              ,cancel: function(){
                  //右上角关闭回调
                  data.elem.checked=!x;
                  form.render();
                  //return false 开启该代码可禁止点击该按钮关闭
              }
          });
          form.render();
          return false;

      });
	  
	//头工具栏事件
	  table.on('toolbar(test)', function(obj){
		console.log(obj);
	    var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	      case 'add':
	        layer.open({
	        	  type: 1,
	        	  title:"添加页面",
	        	  area: ['600px', '600px'],
	        	  content: $('#A_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	});
	        
	      break;
	      case 'delAll':
	    	  var data = checkStatus.data;
	    	  if(data.length > 0){
	    		  layer.confirm('真的删除行这'+data.length+'行数据么', function(index){
	  	  	        var ids = "";
	  	  	        //通过循环将选中的id，用逗号拼接成一个字符串，例如：1，2，3，
	   	  	        for(var i =0; i<data.length; i++){
	  	  	        	ids += data[i].id+",";
	  	  	        }
	  	  	        $.post("<%=basePath%>back/delAllImagesByIds",{
	  	  	        	ids:ids
	  	  	        },function(res){
	  	  	        	if(res){
	  	  	        		layer.msg("删除成功");
	  	  	        		layer.closeAll('page');
	  	  	        		table.reload('showAll', {
	  	  		    			  where: { //设定异步数据接口的额外参数，任意设
	  	  		    			  }
	  	  		    			  ,page: {
	  	  		    			    curr: currNow //获取当前的页码
	  	  		    			  }
	  	  		    			}); //只重载数据
	  	  	        	}else{
	  	  	        		layer.msg("删除失败");
	  	  	        		layer.closeAll('page');
	  	  	        	}
	  	  	        },'json');
	  	    	  })
	    	  }else{
	    		  layer.msg("你还未选中要删除的行！");
	    	  }
	      break;
	    };
	  });
	  
	  //监听行工具事件
	  table.on('tool(test)', function(obj){
	    var data = obj.data;  //当前行的所有数据
	    console.log(obj)
	    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        //点击确定按钮的时候才会进来
	        var id = obj.data.id;
	        $.post("<%=basePath%>back/delImagesById/"+id,{
	        },function(res){
	        	if(res){
	        		layer.msg("删除成功");
	        		layer.closeAll('page');
	        		table.reload('showAll', {
		    			  where: { //设定异步数据接口的额外参数，任意设
		    			  }
		    			  ,page: {
		    			    curr: currNow //获取当前的页码
		    			  }
		    			}); //只重载数据
	        	}else{
	        		layer.msg("删除失败");
	        		layer.closeAll('page');
	        	}
	        },'json');
	      });
	    } else if(obj.event === 'edit'){
	    	 layer.open({
	        	  type: 1,
	        	  title:"修改页面",
	        	  area: ['600px', '600px'],
	        	  content: $('#U_form') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
	        	});
	    	//要给修改的表单回显数据
	    	 form.val('U_form', data);
	    	//data
	    	 $("#U_date").val("");
		    //form.render('select');
	    }
	  });
	  
	  
	  
	  //监听提交[添加按钮]
	  form.on('submit(addBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    $.post("<%=basePath%>back/addImages",{
	    	f_pid:data.field.f_pid,
	    	img:data.field.img,
	    	//isMainStatus:data.field.isMain,
	    	weight:data.field.weight,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("添加成功");
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: 1 //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#A_form")[0].reset();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("添加失败");
	    		layer.closeAll('page');
	    		$("#A_form")[0].reset();
	    	}
	    },'json');
	    
	    
	  });
	  //监听提交[修改按钮]
	  form.on('submit(updateBtn)', function(data){
	    //console.log(data);  //可以得到添加表单中文本框的值
	    //我们 需要发送一个请求，带上我们的参数。
	    $.post("<%=basePath%>back/editImagesById",{
	    	id:data.field.id,
	    	f_pid:data.field.f_pid,
	    	img:data.field.img,
	    	isMainStatus:data.field.isMain,
	    	weight:data.field.weight,
	    },function(res){
	    	if(res){
	    		layer.close(layer.index);
	    		layer.msg("修改成功");
	    		layer.closeAll('page');
	    		table.reload('showAll', {
	    			  where: { //设定异步数据接口的额外参数，任意设
	    			  }
	    			  ,page: {
	    			    curr: currNow //重新从第 1 页开始
	    			  }
	    			}); //只重载数据
	    		//将表单中的数据进行清空【js的reset方法】
	    		$("#U_form")[0].reset();
	    	}else{
	    		layer.close(layer.index);
	    		layer.msg("修改失败");
	    		layer.closeAll('page');
	    		$("#U_form")[0].reset();
	    	}
	    	
	    },'json');
	    
	    
	  });
	  
	  
	  
	  //添加表单中的图片上传
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#A_imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //console.log(res);  //可以获取到响应过来图片路径
	      //把路径添加到文本框
	      $("#A_img").val(res.data);
	      
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	  //修改表单中的图片上传
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#U_imgUpload' //绑定元素
	    ,url: '<%=basePath%>upload/img' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	      //console.log(res);  //可以获取到响应过来图片路径
	      //把路径添加到文本框
	      $("#U_img").val(res.data);
	      
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	  
	});


</script>
</body>
</html>